import React from 'react';
import styles from './TeacherModal.css';
import {Form,Input,InputNumber,Modal,Spin } from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};

function TeacherModal({
    visible,
    type,
    onOk,
    item,
    onCancel,
    loading,
    form:{
        getFieldDecorator,
        validateFields,
        getFieldsValue
    }
}) {
    function handleOk(){
        validateFields((errors)=>{
            if(errors){
                return;
            }
            const data={
                ...getFieldsValue(),
                id:item.id
            };
            onOk(data);
        });
    }
    let isCreate = type;
    item=item?item:{};
    const modalOpts={
        title:`${isCreate?'新建教师':'编辑教师'}`,
        visible,
        onOk:handleOk,
        onCancel:()=>{
            if(!loading){
                onCancel();
            }
        },
        wrapClassName:'vertical-venter-modal'
    };
    return (
        <Modal {...modalOpts}>
        <Spin spinning={loading}><Form
        horizontal  >
        <FormItem label='姓名' hasFeedback {...formItemLayout}>
        {getFieldDecorator('name',{
            initialValue:item.name,
            rules:[{required:true,message:'姓名未填写'}]
        })(<Input disabled={!isCreate}/>)}
        </FormItem>
        <FormItem label='手机号' hasFeedback {...formItemLayout}>
        {getFieldDecorator('phoneNumber',{
            initialValue:item.phoneNumber,
                rules:[{required:true,message:'手机号未填写'},{
                    type:'string',
                    len:11,
                    message:"请输入正确的手机号"
                }]
        })(<Input />)}
        </FormItem>
        <FormItem label='考勤编号' hasFeedback {...formItemLayout}>
        {getFieldDecorator('workId',{
            initialValue:item.workId,
            rules:[{required:true,message:'考勤号未填写'}]
        })(<Input />)}
        </FormItem>
        </Form>
        </Spin>
        </Modal>
  );
}

export default Form.create()(TeacherModal);
